<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模拟用户登录</title>
		<link rel="stylesheet" href="css/bootstrap.min.css"/>
		<!-- 引入第三方样式之外还可以自己定义样式，覆盖-->
		<style>
			/*限制网页的宽度*/
			.container{
				width: 300px;
				background-color:blanchedalmond;
			}
			body{background-color: blanchedalmond;}
			#music{
				font-style: initial;
				font-size: 20px;
				color: aquamarine;
			}
		</style>
		<!--导入外部js文件-->
		<script src="js/jquery.min.js">
			
		</script>
	</head>
	<body>
		<div class="container" >
			
			<h3>用户的登录</h3>
			
			<!--展示区域（登陆成功后）,先默认隐藏起来 display-none-->
			<div id="msg" style="display: none;
			  background-color: chartreuse;
			  margin: 10px;">我是初始值</div>
			
			<div class="form-group">
				<label>用户名:</label>
				<input type="text" 
				 class="form-control" 
				 autocomplete="off"
				 placeholder="请输入用户名...";
				 name="username" id="username"/>
			</div>
			<div class="form-group">
				<label>密码:</label>
				<input type="password" 
				 class="form-control"
				 autocomplete="off"
				 placeholder="请输入您的密码..."
				 name="password" 
				 id="password" />
			</div>
			<div>
				<!--给按钮绑定事件onclick单击事件-->
				<button onclick="doSubmit()" class="btn btn-success" 
				id="btnSubmit">登录</button>
				<button onclick="doClear()" class="btn btn-danger" 
				id="btnClear">清空</button>
			</div>
		</div>
	</body>
	<script>
		//定义一个函数doSubmit
		function jsdoSubmit(){
			//获取用户名框的内容
			var username=document.getElementById("username");//代表input用户名输入框
			//打印到控制台
			//console.log(username);//对象
			console.log(username.value);//属性值
			//获取密码
			var password=document.getElementById("password");
			//打印到控制台
			console.log(password.value);
			
			//获取到msg框，设置他的新值，展示msg框，设置新的颜色
			var msg=document.getElementById("msg");
			//div和input获取值语法不同：注意
			msg.innerText=username.value+"，登陆成功" //设置新值
			
			//改变msg框样式，设置style的属性,展示msg框（重新定义样式，会把老的样式覆盖）
			msg.style=
			"display:block;color:white;background-color: chartreuse;margin: 10px;padding:10px;";
		
		}
		//清空两个输入框
		function jsdoClear(){
			document.getElementById("username").value="";//清空值
			document.getElementById("password").value="";//清空值
			
}
	
     	//jQuery实现登陆的按钮
	     function doSubmit(){
		 var username=$("#username");
		 var msg=$("#msg");
		 msg.text(username.val()+",登录成功")//修改了div的内容
		 //jQuery,专门支持css设置 方法，两个值key，value
		 msg.css("display","block");//显示div
		 msg.css("color","white");//显示颜色
		 msg.css("background","#008000");//背景色
		 msg.css("margin","10px");//外围空白
		 msg.css("padding","10px");//内部空白
		 
	}
	
		//jQuery语法来实现，简化
		function doClear(){//清空输入框
		//置空,选择器selector（标签直接写名字，class属性“.”,id属性“#”）
		//函数吗，规范val（）
		$("#username").val('');
		$("#password").val('');
		}
		
		</script>
</html>